<template>
  <div id="listTable">
    <el-table 
      v-loading="loading" 
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)" 
      :data="list" 
      ref="multipleTable" 
      @selection-change="handleSelectionChange" 
      style="width: 100%; font-size: 13px;">
      <el-table-column label="选择" type="selection" width="25" align="center"></el-table-column>
      <el-table-column prop="name" label="商品名称" ></el-table-column>
      <el-table-column prop="category.name" align="center" label="商品类型" width="78"></el-table-column>
      <el-table-column prop="shop_price" align="center" label="报价" width="85">
        <template slot-scope="scope">{{scope.row.shop_price}}</template>
      </el-table-column>
      <el-table-column prop="deposit" align="center" label="定金" width="70"></el-table-column>
      <el-table-column prop="stock_nums" align="center" label="库存" width="48"></el-table-column>
      <el-table-column label="封面图" width="100" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cover" />
        </template>
      </el-table-column>
      <el-table-column prop="sold_nums" label="销售量" align="center" width="68" ></el-table-column>
      <el-table-column prop="fav_nums" label="收藏量" align="center" width="68"></el-table-column>
      <el-table-column prop="hit_nums" label="点击量" align="center" width="68"></el-table-column>
      <el-table-column label="状态" align="center" width="68">
        <template slot-scope="scope">
          <el-tag size="small">已上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column style="font-size: 30px" prop="updated_at" width="130" label="更新时间">
        <template slot-scope="scope">{{scope.row.updated_at | formatDate}}</template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      @current-change="SeltCurent"
    ></el-pagination>
  </div>
</template>
<script>
// 处理时间的工具
import { delTime } from "./../../utils/myTools";
export default {
  data() {
    return {
      goods_ids:[],
    };
  },
  props: [
    // 商品数据列表
    "list",
    // 商品总数 
    "count",
    // 是否获取完毕商品数据
    'loading'
  ],
  filters: {
    formatDate(val) {
      return delTime(val);
    }
  },
  methods: {
    //多选按钮
    handleSelectionChange(){
      let goodsList=this.$refs.multipleTable.selection
      this.goods_ids=goodsList
      // 传值给父组件选中的商品
      this.$emit('receive',this.goods_ids)
    },
    SeltCurent(val) {
      // 通知父组件翻页
      this.$emit("getGoodslist", val);
    },
  }
};
</script>
<style scoped>
.el-pagination {
  margin: 30px 0;
}
img {
  height: 60px;
  width: 60px;
}
</style>